<template>
  <div class="viewcontainer" v-if="dataset">
    <el-dialog
      :title="detailTitle"
      :visible.sync="detailFormVisible"
      width="500px"
      :close-on-click-modal="false"
    >
      <hi-form
        ref="detailForm"
        v-if="detailFormVisible"
        size="mini"
        :model="nearTermData"
        :dataSource="dataset"
        v-bind="form"
      ></hi-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="clickOk">确 定</el-button>
      </span>
    </el-dialog>
    <el-row class="view-header">
      <el-col :span="22">
        <hi-lquery v-bind="queryPanel" :target="dataset"></hi-lquery>
      </el-col>
    </el-row>

    <el-row class="view-main">
      <el-table
        ref="dataTable"
        :data="dataset.data"
        height="100%"
        style="width: 100%"
        v-loading="dataset.loading"
        :row-class-name="tableRowClassName"
      >
        <el-table-column type="index" width="50" />
        <el-table-column prop="FSHOPDESC" label="店铺" width="180" />
        <el-table-column prop="FGOODSNUMBER" label="店内编码" width="180" />
        <el-table-column prop="FBARCODE" label="条形码" width="180" />
        <el-table-column prop="FDESC" label="通用名称" width="180" />
        <el-table-column prop="FBRAND" label="品牌" width="180" />
        <el-table-column prop="FCLASS" label="类别" width="180" />
        <!-- <el-table-column prop="FDRUGCLASS" label="药品分类" width="180" /> -->
        <el-table-column prop="FSPEC" label="规格" width="300">
          <template slot-scope="scope">
            <div class="text-truncate" :title="scope.row.FSPEC">
              {{ scope.row.FSPEC }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="FAMOUNT" label="数量" width="140" />
        <el-table-column prop="FUNIT" label="单位" width="140" />
        <el-table-column prop="FPROCOMPANY" label="生产厂家" width="260">
          <template slot-scope="scope">
            <div class="text-truncate" :title="scope.row.FPROCOMPANY">
              {{ scope.row.FPROCOMPANY }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="PRODUCTIONDATE" label="生产日期" width="180" />
        <el-table-column prop="EXPIRATIONDATE" label="有效期至" width="180" />
        <el-table-column prop="EXPIRATIONDAYS" label="距过期天数" width="180" />
        <el-table-column fixed="right" label="操作" width="60">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showEdit(scope)">
              调整
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row class="view-footer pagebar">
      <hi-pagination
        background
        :total="dataset.total"
        :target="dataset"
      ></hi-pagination>
    </el-row>
  </div>
</template>

<script>
import { HiPagination, HiLquery, HiForm, utils } from "hi-ui";
import viewBase from "@/views/base";
import nearTermCfg from "./dataset";
export default {
  name: "nearTermlist",
  extends: viewBase,
  components: {
    HiPagination,
    HiLquery,
    HiForm,
  },
  data() {
    let datasetCfg = Object.assign({}, nearTermCfg, {
      action: "autoAction",
    });
    return {
      //调整数据
      nearTermData: {
        FDESC: null,
        FBARCODE: null,
        EXPIRATIONDATE: null,
      },
      //编辑状态
      editstate: "add",
      editData: {},
      //数据桥梁
      dataBridge: new Map(),
      detailTitle: null,

      detailFormVisible: false,
      dataset: null,
      //数据集配置
      datasetCfg: datasetCfg,
      total: 100,

      form: {
        columnsTotal: 1,
        items: [
          {
            name: "FDESC",
            label: "通用名称",
            element: "div",
            injection: "domProps.innerHTML",
            props: {
              type: "",
              effect: "",
            },
            domProps: {
              innerHTML: "",
            },
          },
          {
            name: "FBARCODE",
            label: "条形码",
            element: "div",
            injection: "domProps.innerHTML",
            props: {
              type: "",
              effect: "",
            },
            domProps: {
              innerHTML: "",
            },
          },
          {
            element: "el-date-picker",
            name: "EXPIRATIONDATE",
          },
        ],
      },
      //查询面板配置
      queryPanel: {
        columnsTotal: 4,
        fields: [
            {
            // element: "el-input",
            label: "店铺",
            name: "FSHOPDESC",
            element: "hi-select-grid",
            required: true,
            props: {
              selectOption: {
                loading: true,
                multiple: false,
                clearable: true,
                filterable: true,
                "allow-create": true,
                "collapse-tags": true,
              },
              lookup: {
                modelFile: "database/shop/dataset/ShopEntity.xml",
                label: "FDESC",

                tableprops: {
                  "show-header": false,
                  "max-height": 400,
                  white_space_nowrap: true,
                },
                returnFields: {
                  FSHOPDESC: "FDESC",
                  FSHOPDESCID: "FNUMBER",
                },
                columns: [
                  {
                    width: "140",
                    name: "FDESC",
                    label: "通用名称",
                  },
                ],
              },
            },
          },
          {
            element: "el-input",
            label: "店内编码",
            name: "FGOODSNUMBER",
          },
          {
            // element: "el-input",
            label: "通用名称",
            name: "FDESC",
            element: "hi-select-grid",
            props: {
              selectOption: {
                loading: true,
                multiple: false,
                clearable: true,
                filterable: true,
                "allow-create": true,
                "collapse-tags": true,
              },
              lookup: {
                modelFile: "database/drug/dataset/DrugEntity.xml",
                // label: "FDESC",
                // filtername: "FCOMMON",
                filternames: [
                  {
                    name: "FDESC",
                  },
                  {
                    name: "FPINYIN",
                    // operate: "like",
                  },
                  {
                    name: "FJIANPIN",
                  },
                ],
                active: false,
                tableprops: {
                  // border:true,
                  hideRowBorder: true,
                  stripe: true,
                  "show-header": false,
                  //fit:false,
                  size: "mini",
                  "max-height": 400,
                  white_space_nowrap: true,
                },
                returnFields: {
                  FDESC: "FDESC",
                  // FSHOPDESCID: "FNUMBER",
                },
                columns: [
                  {
                    width: "180",
                    name: "FDESC",
                    label: "通用名称",
                  },
                ],
              },
            },
          },
        

          {
            element: "el-date-picker",
            label: "有效期至",
            name: "EXPIRATIONDATE",
            // operate: "like",
            props: {
              "value-format": "yyyy-MM-dd",
            },
          },
        ],
      },
    };
  },
  model: {
    prop: "value",
    event: "valuechange",
  },
  props: {
    value: {
      type: Object,
    },
  },

  computed: {},
  watch: {},
  methods: {
    tableRowClassName({ row, rowIndex }) {
      if (row.EXPIRATIONDAYS <= 0) {
        return "warning-row";
      }
      return "";
    },

    //调整
    adjust(data, Val) {
      // debugger;
      let saveHelper = this.createSaveHelper(
        "store/query/dataset/QueryEntity.xml"
      );
      data.forEach((element) => {
        saveHelper.update(element, {
          EXPIRATIONDATE: Val,
        });
      });
      saveHelper.save().then((res) => {
        this.$message({
          message: "调整成功",
          type: "success",
        });
        this.detailFormVisible = false;
        this.dataset.reload();
      });
    },

    clickOk() {
      if (this.nearTermData.EXPIRATIONDATE === null) {
        this.$message.error("请选择有效期至!");
        return;
      }
      if (this.nearTermData.EXPIRATIONDATE) {
        this.adjust([this.editData], this.nearTermData.EXPIRATIONDATE);
      }
      this.nearTermData.EXPIRATIONDATE = null;
    },

    showEdit(data) {
      this.dataset.curRecord = data.row;
      this.editstate = "edit";
      this.detailTitle = "近效期调整";
      this.detailFormVisible = true;
      this.editData = Object.assign({}, this.dataset.curRecord);
      this.nearTermData.FDESC = this.dataset.curRecord.FDESC;
      this.nearTermData.FBARCODE = this.dataset.curRecord.FBARCODE;
    },
    /*   toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.dataTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.dataTable.clearSelection();
      }
    }, */
    formatMoney(val) {
      return utils.number.format(val, "￥");
    },
    afterquery() {
      this.dataset.load();
    },
  },

  mounted() {
    this.dataset = this.createDataSet(this.datasetCfg);
    this.dataBridge.set(this.dataset, ["dataTable", "detailForm"]);
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scope>
.view-main {
  padding: 0 8px;
  position: absolute;
  top: 100px;
  bottom: 50px;
  left: 0px;
  width: 100%;
}
.el-table .warning-row {
  color: red;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>
